<template>
	<view class="app-container">
		<u-navbar title="应用中心" back-icon-color="#2D405E" :title-bold="true" title-color="#2D405E" title-size="32" :border-bottom="false"></u-navbar>
		
		<!-- 主体内容区 -->
		<view class="content-wrapper">
			<!-- 左侧分类导航 -->
			<scroll-view class="sidebar" scroll-y>
				<view 
					v-for="(category, index) in app_list" 
					:key="index"
					class="sidebar-item"
					:class="{ active: currentCategoryIndex === index }"
					@click="switchCategory(index)"
				>
					<view class="sidebar-text">{{ category.menuName }}</view>
				</view>
			</scroll-view>
			
			<!-- 右侧应用列表 -->
			<scroll-view class="app-content" scroll-y>
				<!-- 分类应用区域 -->
				<view class="section-wrapper" v-if="app_list.length > 0">
					<view class="section-title">
						<text class="title-text">{{ app_list[currentCategoryIndex].menuName }}</text>
					</view>
					
					<view class="app-grid">
						<view 
							class="app-item"
							v-for="app in filteredCategoryApps" 
							:key="app.url"
							@click="goPage(app.url)" 
						>
							<view class="app-icon-wrapper" :style="{ backgroundColor: app.color }">
								<text :class="[app.icon]" class="custom-icon"></text>
							</view>
							<view class="app-name">{{ app.label }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { menus } from './app.js';
export default {
	data() {
		return {
			currentCategoryIndex: 0,
			app_list: []
		};
	},
	computed: {
		userCenterId() {
			return this.$store.state.userInfo.userCenterId;
		},
		enterpriseScope() {
			return this.$store.state.enterprise.scope;
		},
		filteredCategoryApps() {
			if (!this.app_list.length || !this.app_list[this.currentCategoryIndex]) {
				return [];
			}
			return this.app_list[this.currentCategoryIndex].menuList.filter(
				app => this.$accessCheck(this.$Access[app.access])
			);
		}
	},
	onLoad() {
		if (parseInt(this.$store.state.enterprise.scope) === 4) {
			this.app_list = menus.map(item => {
				return{
					...item,
					menuList:item.menuList.filter(menu=>menu.label !== '商品资料')
				}
			});
		} else {
			this.app_list = menus;
		}
		
		// 设置所有应用图标颜色为主题色
		this.app_list.forEach(category => {
			category.menuList.forEach(app => {
				app.color = '#FB5904';
			});
		});
	},
	methods: {
		switchCategory(index) {
			this.currentCategoryIndex = index;
		},
		goPage(url) {
			// 检查URL是否有效
			if (!url) {
				this.$u.toast('页面链接无效');
				return;
			}
			
			// 使用通用的页面导航方法
			uni.navigateTo({
				url: url,
				fail: (err) => {
					// 如果导航失败，尝试使用switchTab
					uni.switchTab({
						url: url,
						fail: () => {
							// 如果switchTab也失败，则显示错误提示
							this.$u.toast('页面跳转失败');
							console.error('页面跳转失败', url, err);
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.app-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f8f8f8;
}

.content-wrapper {
	display: flex;
	flex: 1;
	overflow: hidden;
	margin-top: 20rpx;
}

.sidebar {
	width: 180rpx;
	background-color: #f0f0f0;
	height: 100%;
	
	.sidebar-item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		
		&.active {
			background-color: #ffffff;
			
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 30rpx;
				height: 40rpx;
				width: 6rpx;
				background-color: #FB5904;
				border-radius: 0 4rpx 4rpx 0;
			}
			
			.sidebar-text {
				color: #FB5904;
				font-weight: 500;
			}
		}
		
		.sidebar-text {
			font-size: 26rpx;
			color: #666666;
			text-align: center;
			padding: 0 10rpx;
		}
	}
}

.app-content {
	flex: 1;
	background-color: #ffffff;
	height: 100%;
}

.section-wrapper {
	padding: 20rpx;
	
	.section-title {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		
		.title-text {
			font-size: 30rpx;
			color: #333333;
			font-weight: 500;
		}
	}
}

.app-grid {
	display: flex;
	flex-wrap: wrap;
	
	.app-item {
		width: 33.33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		margin-bottom: 30rpx;
		
		.app-icon-wrapper {
			width: 90rpx;
			height: 90rpx;
			border-radius: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 12rpx;
			
			.custom-icon {
				font-size: 48rpx;
				color: #ffffff;
			}
		}
		
		.app-name {
			font-size: 26rpx;
			color: #333333;
			max-width: 140rpx;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
</style>
